<template>
    <div>
        <div class="tuijian">
            <header @click="tuiJian">
                <p>商家推荐</p>
                <i class="iconfont">&#xe601;&#xe601;&#xe601;</i>
                </header>
            <ul >
                <li v-for="item,i in tjFood" @click="xiang($event,item)" :key="i" v-show="i<3">
                    <img :src="$image+item.food_img" alt="">
                    <p :title="item.name">{{item.name}}</p>
                    <div class="pan">
                        <p>￥<span style="font-size:15px">{{item.price}}</span></p>
                       <van-icon name="add" size="20px" color="#0000f8" />
                    </div>
                </li>
               
            </ul>
        </div>

        <div class="lian" >
            <ul >
                <li class="lefts" v-for="item,i in ti" @click="jump($event,i)" :class="{yanse:i==index?true:false}" :key="i" v-show="item!='推荐'">{{item}}</li>
              
            </ul>
            <div class="you" ref="content">
                <div v-for="item,i in ti" :key="i" v-show="item!='推荐'">
                    <p class="biao">{{item}}</p>
                <ul>
                    <li v-for="items,index in Food" @click="xiang($event,items)" :key="index" v-show="items.food_lei==item">
                        <img :src="$image+items.food_img" alt="">
                        <div>
                            <p>{{items.name}}</p>
                            <em>{{items.jshao}}</em>
                            <dl>月售{{random[Math.floor(Math.random()*random.length)]}}</dl>
                             <div class="pan">
                                <p>￥<span style="font-size:15px">{{items.price}}</span></p>
                               <van-icon name="add" size="20px" color="#0000f8" />
                            </div>
                        </div>
                    </li>
                   
                </ul>
                </div>
                
            </div>
        </div>
       <footer>
           <Footer :Msg="msg"></Footer>
        </footer>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Footer from '../components/footerCar'
import {ajax_Food, ajax_tjFood} from '../ajax/index.js'
export default {
    name: '',
    data(){
        return{
            tjFood:[],
            Food:[],
            ti:[],
            index:'',
            msg:[],
            random:[1,8,10,7,19,3,6],
        }
    },
    computed:{
      ...mapState(['car'])
    },
    methods:{
      tuiJian(){
          this.$router.push('/tuiJian')
      },
      jump(e,i){
        //   console.log(e)
         var biao=document.querySelectorAll('.biao');
         var kuan=document.querySelector(".you")
        //  console.log(biao[i].offsetTop)
         kuan.scrollTo(0,biao[i].offsetTop-10)
         var lefts=document.querySelectorAll('.lefts')
         lefts.forEach(item => {
            //  console.log(item)
             item.classList.remove('yanse')
         });
         e.target.classList.add('yanse')
      },
      scroll(e){
            var biao=document.querySelectorAll('.biao');
         var scrollTop=document.querySelector(".you").scrollTop
       
          for(let i=0;i<biao.length;i++){
               
                // console.log(scrollTop)
              if(biao[i].offsetTop-scrollTop<=30){
                  this.index=i;
                  
              }
          }
      },
      xiang(e,item){
        //   console.log(item);
        // console.log(e.target)
        //   this.$router.push(`/xiangQing?content=${JSON.stringify(item)}`)
         if(e.target.tagName!=="I"){
                    this.$router.push({
                        path:'/xiangQing',
                        name:'详情',
                        params:{
                            name:'信息',
                            data:item
                        }
                    })
         }else if(e.target.parentElement.className=='pan'&&e.target.tagName=="I"){
            //  console.log("fei")
            this.msg.push(item)
            // console.log(this.msg)
          }
            
        }
    },
    components:{
      Footer
    },
    created(){
        this.msg=this.car,
        ajax_tjFood({
            food_lei:'推荐'
        }).then(data=>{
            // console.log(data.data)
            this.tjFood=data.data;
        }),
        ajax_Food().then(data=>{
            this.Food=data.data;
            // console.log(this.Food);
            this.Food.forEach(item => {
                this.ti.push(item.food_lei)
            });
            this.ti=new Set(this.ti)
            // var array=this.ti.splice(0,1)
            // var array=this.ti;
            // console.log(this.ti)
        })
    },
    mounted(){
        
      this.$refs.content.addEventListener('scroll',this.scroll);
      },
    destroyed(){
        // console.log(this)
        // this.$refs.content.removeEventListener('scroll',this.scroll)
        //  console.log('飞')
    }
}
</script>

<style scoped>

.yanse{
    text-shadow: 2px 2px 3px rgb(162, 0, 255), -2px 2px 3px rgb(162, 0, 255),2px -2px 3px rgb(162, 0, 255), -2px -2px 3px rgb(162, 0, 255);
    background-color: white;
    /* color: rgb(234, 0, 255); */
    color: rgb(8, 8, 8);
}
header{
    margin:2vw 3vw;
    display: flex;
    justify-content: space-around;
    padding: 1vw 0;
    /* border-radius: 5px; */
    color: white;
    background-image:radial-gradient(at top right,red,orange,rgb(255, 0, 149));
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
header>p{
    margin-right: 210px;
}
.tuijian>ul{
    width: 100%;
    display: flex;
}
.tuijian li{
    width: calc((100% - 12vw)/3);
 
    margin-left: 3vw;
}
.tuijian li>p{
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 1vw 0;
}
.tuijian li>div{
    display: flex;
    justify-content: space-between;
    color: red;
    margin: 2vw 0;
}
.tuijian li>div>p{
    font-size: 13px;
}

.tuijian img{
    width: 100%;
    height: 100px;
    border-radius: 4px;
}
.lian{
    display: flex;
    padding: 2vw 0;
    /* height: 84vh;
    overflow: auto; */
    position: relative;
    /* scrollbar-width:none; */

}
.lian>ul{
    position: absolute;
    top: 0;
    width: 21vw;
    text-align: center;
    background-color: rgb(247, 247, 247);
    border-radius: 4px;
    color: rgb(92, 87, 87);
}
.lian>ul>li{
    width: 75%;
    padding: 4vw 2.5vw;
    font-family: "黑体";
    font-size: 13px;
    
     text-align: left;

}
.active{
    background-color: white;
}
.you{
    width: 76vw;
    padding: 2vw;
   background-color: white;
   margin-left: 22vw;
   height: 70vh;
   overflow: auto;
   /* scroll-behavior: smooth; */
}
.you p{
    font-size: 12px;
}

.you ul{
    width: 100%;
}
.you li{
    margin: 3vw 0;
    display: flex;
}
.you li>div{
    width: 52vw;
    margin-left:2vw;
    /* color: rgb(121, 121, 248); */
}
.you li>div>p{
    font-size: 15px;
    font-weight: 600;
    font-family: "宋体";
}
.you li em,.you li dl{
    font-size: 10px;
    color: gray;
    margin: 5px 0;
}
.you li>div>div{
    display: flex;
    justify-content: space-between;
    color: red;
    margin: 2vw 0;
}
.you img{
    width: 20vw;
    height: 20vw;
}
footer{
    position: fixed;
    bottom: 7vh;
    z-index: 10000;
}
footer>div{
    width: 96vw;
    background-color: white;
    padding: 1.8vw 2vw;
    
}
footer button{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24vw;
    height: 100%;
    outline: none;
    border: none;
    background-color: chartreuse;
}
</style>